﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="DD_Proto2.aspx.cs" Inherits="DragDropProto2.DD_Proto2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script> -->
    <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script> -->
    <style type="text/css">
        html {
	        overflow-y: scroll;
        }

        .leftsonglist 
        {
            float: left;
            width: 350px;
        }
        .rightset 
        {
            width: 350px;
        }
        .draglist
        {
            padding-left: 0px;
            margin-left: 0px;
            margin-top: 0px;
            margin-bottom: 0px;
            padding-top: 0px;
            width: 325px;
            list-style-type: none;
        }
        .node_wrapper
        {
            border: 1px solid gray; /*margin: 5px 0 5px 0;*/
            margin: 0;
            padding: 2px;
        }
        .node_wrapper img 
        {
            border: 0;
        }
        
        
        .node_song, .node_key, .node_singer
        {
            display: inline-block;
        }
        
        .node_song
        {
            width: 200px;
            cursor: pointer;
        }
        .node_key
        {
            width: 25px;
            font-weight: bold;
        }
        .node_singer
        {
            display: inline;
            width: 50px;
            color: Green;
        }
        .node_length
        {
            display:none;
        }
        
        
        .placeHolder div
        {
            background-color: white !important;
            border: dashed 1px gray !important;
        }
        
         /* all context menus have this class */
      .context-menu {
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        
        background-color: #f2f2f2;
        border: 1px solid #999;
        
        list-style-type: none;
        margin: 0;
        padding: 0;
      }
      .context-menu a {
        display: block;
        padding: 3px;
        text-decoration: none;
        color: #333;
      }
      .context-menu a:hover {
        background-color: #666;
        color: white;
      }
      
      .settotal 
      {
          width: 325px;
          text-align: right;
          padding: 0;
          margin: 0;
          font-size: .9em;
          font-weight: bold;
      }
      
    </style>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" >
    </asp:ScriptManager>

    <div>
        <h1>
            jQuery List DragSort ASP.NET Example</h1>
        <br />
        Drag the song below from the Song List to the Set Lists.&nbsp; Click on the song 
        name to move.&nbsp; Click on the EDIT icon to edit song info.<br />
        <div class="box">
            <input id="btnSave" type="button" value="Save List" />
            <input id="btnGet" type="button" value="Get Saved List" />
            <div class="result"></div >
        </div >


    <script type="text/javascript">
        function doSend(songlist, set1list, set2list, set3list) {
            PageMethods.SaveListOrder(songlist, OnRequestComplete, OnRequestError);
        };


        function OnRequestComplete(result, userContext, methodName) {
            //alert('saved');
        };

        function OnRequestError(error, userContext, methodName) {
            if (error != null) {
                alert(error.get_message());
            }
        };
    </script>



        <script type="text/javascript">

            function dosave() {
                var songlist = ($("#songlist li").map(function () { return $(this).attr("itemID"); }).get()).join('","');
                //var set1list = $("#set1 li").map(function () { return $(this).attr("itemID"); }).get();
                //var set2list = $("#set2 li").map(function () { return $(this).attr("itemID"); }).get();
                //var set3list = $("#set3 li").map(function () { return $(this).attr("itemID"); }).get();

                PageMethods.PersistList("songlist", songlist, OnPersistComplete, OnPersistError);
                //alert(songlist);
            };

            function OnPersistComplete(result, userContext, methodName) {
                //alert('saved');
            };

            function OnPersistError(error, userContext, methodName) {
                if (error != null) {
                    alert(error.get_message());
                }
            };

            function doload() {
                PageMethods.RetrieveList("songlist", OnGetComplete, OnGetError);
            };

            function OnGetComplete(result, userContext, methodName) {
                alert(result);
            };

            function OnGetError(error, userContext, methodName) {
                if (error != null) {
                    alert(error.get_message());
                };
            };


            $(document).ready(function () {
                // Hook up our save function to the button
                $('#btnSave').click(dosave);
                $('#btnGet').click(doload);
            });

                    /*
                http://localhost:56366/WebService1.asmx/HelloWorld
                    $.ajax({
                    type: "POST",
                    url: "WebService1.Asmx\HelloWorld",
                    data: "name=John&location=Boston",
                    success: function (msg) {
                    alert("Data Saved: " + msg);
                    });
                    */
        </script>

        <asp:Label ID="lblMessage" runat="server" ForeColor="#990000"></asp:Label>
        <br />
        <br />
        <table width="800px">
        <tr>
        <td width="400px" valign=top>
            <h2>Song List</h2>
            <ul id="songlist" class="draglist">

            <asp:Repeater ID="Songs" runat="server">
                <ItemTemplate>
                    <li id='node<%# Container.ItemIndex %>' itemid='<%# Container.ItemIndex %>' itemlength='<%# DataBinder.Eval(Container.DataItem, "Length")%>'>
                        <div class="node_wrapper"><div class="node_song"><%# DataBinder.Eval(Container.DataItem,"Name") %></div>
                        <div class="node_key"><%# DataBinder.Eval(Container.DataItem, "Key")%></div>
                        <div class="node_singer"><%# DataBinder.Eval(Container.DataItem, "Soloist")%></div>
                        </div></li>
                </ItemTemplate>
            </asp:Repeater>
            </ul>
        </td>
        <td width="400px" valign="top">
            <h2>
                Set 1</h2>
            <ul id="set1" class="draglist">
            </ul>
            <div id="set1total" class="settotal">Length: 0 minutes</div>
            <br />
            <h2>
                Set 2</h2>
            <ul id="set2" class="draglist">
            </ul>
            <div id="set2total" class="settotal">Length: 0 minutes</div>
            <br />
            <h2>
                Set 3</h2>
            <ul id="set3" class="draglist">
            </ul>
            <div id="set3total" class="settotal">Length: 0 minutes</div>
        </td>
        </tr>
        </table>
        <script type="text/javascript" src="Scripts/jquery.dragsort-0.4.2.min.js"></script>
        <script type="text/javascript">
            $("#songlist, #set1, #set2, #set3").dragsort({ dragSelector: "div.node_wrapper", dragSelectorExclude: "a",
                dragBetween: true, dragEnd: dragDone, placeHolderTemplate: "<li class='placeHolder'><div></div></li>"
            });

            function dragDone(e) {
                updatetotals();
                dosave();

            };

            function secondstostring(length_sec)
            {
                var secs = length_sec % 60;
                var mins = (length_sec - secs) / 60;
                return mins;


            }

            function updatetotals() {
                var set1length=set2length=set3length = 0;
                var songlength1 = $("#set1 li").each(function () { set1length += parseInt($(this).attr("itemlength")); });
                var songlength2 = $("#set2 li").each(function () { set2length += parseInt($(this).attr("itemlength")); });
                var songlength3 = $("#set3 li").each(function () { set3length += parseInt($(this).attr("itemlength")); });
                $("#set1total").html("Set Length: "+ secondstostring(set1length) + " minutes");
                $("#set2total").html("Set Length: " + secondstostring(set2length) + " minutes");
                $("#set3total").html("Set Length: " + secondstostring(set3length) + " minutes");
            };


            /*            function saveOrder() {
            var data = $("#songlist li").map(function () { return $(this).attr("itemID"); }).get();
            $.ajax({ url: "example.aspx/SaveListOrder", data: '{ids:["' + data.join('","') + '"]}', dataType: "json", type: "POST", contentType: "application/json; charset=utf-8" });
            };
            */
        </script>

    <script src="Scripts/jquery.contextMenu.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
      $(document).ready(function(){
        
        $('.node_wrapper').contextMenu('context-menu-1', {
            'Edit Song': {
                click: function (element) {
                    window.location.href = "EditSong.aspx";
                    //alert('Edit clicked');
                }
            },
            'Remove From List': {
                click: function(element) { // element is the jquery obj clicked on when context menu launched
                    alert('Remove clicked');
                }
            },
            'Duplicate Song': {
                click: function(element){ alert('Duplicate clicked'); }
            }
        });
       
      });
    </script>
    </div>

</asp:Content>
